LINE風 ふきだし記法 UserCSS
ゆっくり霊夢ですちゃこ式ゆっくり霊夢.icon
ちゃこ式ゆっくり魔理沙.iconゆっくり魔理沙だぜ
ちゃこ式ゆっくり魔理沙.iconさて霊夢、メモってどうやって取ってる？
普通にノートに書いたり、スマホのメモアプリを使ったりかな？ちゃこ式ゆっくり霊夢.icon
ちゃこ式ゆっくり魔理沙.iconそれなら、Scrapboxを試してみるといいぜ！
Scrapbox？なんか聞いたことあるけど、どんなツールなの？ちゃこ式ゆっくり霊夢.icon
ちゃこ式ゆっくり魔理沙.icon簡単に言うと、ノート同士が自動でリンクするメモアプリだな
リンクするってどういうこと？ちゃこ式ゆっくり霊夢.icon
ちゃこ式ゆっくり魔理沙.icon例えば、メモの中に［東方Project］って書くと、自動で東方Projectのページが作られるんだ え、勝手にページができるの？ちゃこ式ゆっくり霊夢.icon
ちゃこ式ゆっくり魔理沙.iconそうだぜ
ちゃこ式ゆっくり魔理沙.iconそして、そこをクリックすればすぐに関連ページに飛べる
ちゃこ式ゆっくり魔理沙.iconつまり、書いてるだけでメモ同士がつながっていくんだ
なるほど、Wikiみたいに情報を整理できるってことね！ちゃこ式ゆっくり霊夢.icon
ちゃこ式ゆっくり魔理沙.iconhttps://scrapbox.io/files/67c11c4a9b7cb9b8853d2f8c.png
ちゃこ式ゆっくり魔理沙.icon間違えたぜ
※メインの文章はChatGPTに考えてもらいました。
hr.icon
code:readme.txt
左側で発言 → page.iconmessage
右側で発言 → messagepage.icon
message内の改行 → \n
形にはなるものの作りかけ(?)
だれかきれいにいい感じにして～～～～～
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
code:line_message_style.css
/* アイコンの位置を少し下げる */
span.text > span > span > a.link.icon > img.icon {
margin-top: 0.5em;
}
/* 編集時はプレーンテキストになるように */
.line:not(.cursor-line) {
/* ふきだし本体 */
.deco-\{, .deco-\} {
display: inline-block;
max-width: calc(100% - 70px);
margin: auto 0;
margin-bottom: 1em;
font-size: 1em;
vertical-align: top;
border-radius: 0.4em;
word-break: break-all;
a, a:hover {
text-decoration: underline !important;
}
}
.deco-\{ {
padding: 0.25em 0.5em 0.25em 0.6em;
margin-left: 0.7em;
}
.deco-\} {
padding: 0.25em 0.3em 0.25em 0.5em;
text-align: left;
}
/* 右側ふきだしの右寄せ */
span:has(span.deco > span.deco-\}) {
text-align: right;
max-width: 500px;
}
/* 左側ふきだしの尻尾 */
span:has(+ span > span.deco > span.deco-\{) > a.icon::after {
content: "";
visibility: hidden !important;
margin-left: 0.25em;
}
span:has(+ span > span.deco > span.deco-\{):has(a.icon > img.icon)::after {
content: " ";
clip-path: polygon(0 50%, 100% 0, 100% 100%);
position: absolute;
height: 1em;
margin-top: 0.75rem;
}
/* 右側ふきだしの尻尾 */
span:has(span.deco > span.deco-\}) + span:has(a.icon > img.icon) > a.icon::before {
content: "";
margin-left: 1em;
visibility: hidden !important;
}
span:has(span.deco > span.deco-\}) + span:has(a.icon > img.icon)::before {
content: " ";
clip-path: polygon(0 0, 100% 50%, 0 100%);
position: absolute;
height: 1em;
margin-top: 0.75rem;
}
/* 共通特定サイズ以上の時にメッセージサイズを制限*/ @media(min-width: 440px) {
span > span.deco > span.deco-\{,
span:has(span.deco > span.deco-\}) > span.deco > span.deco-\} {
max-width: 320px;
}
}
/* メッセージを改行可能にする */
visibility: hidden;
}
content: "\A";
white-space: pre;
}
}
hr.icon
参考にしたサイト
Gattxxa.iconうぷ主です